<div class="bg-primary text-white p-2" [class.bg-warning]="editing">
    <h5>{{editing  ? "Edit" : "Create"}} Product</h5>
    <!--Last Event: {{ stateEvents | async | formatState }}-->
  </div>
  
  <form novalidate #form="ngForm" (ngSubmit)="submitForm(form)" (reset)="resetForm()">
  
      <div class="form-group">
          <label>Name</label>
          <input class="form-control" name="name"
                 [(ngModel)]="product.name" required />
      </div>
  
      <div class="form-group">
          <label>Category</label>
          <input class="form-control" name="category"
                 [(ngModel)]="product.category" required />
      </div>
  
      <div class="form-group">
          <label>Price</label>
          <input class="form-control" name="price"
                 [(ngModel)]="product.price"
                 required pattern="^[0-9\.]+$" />
      </div>
  
      <button type="submit" class="btn btn-primary"
              [class.btn-warning]="editing" [disabled]="form.invalid">
          {{editing ? "Save" : "Create"}}
      </button>
      <button type="reset" class="btn btn-secondary" routerLink="/">Cancel</button>
  </form>
  